<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列对象</title>
    <script>
        function f1(){
            // console.log("改变选项了")
            // JS中提供了两个对象
            // Select对象:每一个select标签对应一个Select对象
            // Option对象:每一个option标签对应一个Option对象
            let s1 = document.getElementById("s1"); // Select对象
            console.log("当前选项总数:"+s1.length);
            let ops = s1.options;
            console.log(ops);
            // Option对象中主要包含两个值
            // 服务器值(value):传递到服务器中的数据,对应的是value属性
            // 文本值(text):显示在页面的数据,对应的是标签体内容
            console.log("服务器值:"+ops[1].value);
            console.log("文本值:"+ops[1].text);

            // 设置默认选项
            // s1.selectedIndex = 3;
            // 获取当前所选的选项的内容
            console.log("当前所选选项的索引号:"+s1.selectedIndex);
            // 获取当前所选项项目的服务器值
            console.log("服务器值:"+ops[s1.selectedIndex].value);
            // 获取当前所选项项目的文本值
            console.log("文本值:"+ops[s1.selectedIndex].text);
        }
        function f2(){
            // 由于下拉列选项中获取的所有选项对应的是一个Option对象数组
            // 而JS中数组的长度可变
            // 向该数组中添加一个Option对象
            // 当数组的长度改变,则原有下拉列中的选项所随之改变
            // 创建Option对象:new Option(文本值,服务器值)
            let inText = document.getElementById("inText").value;
            let inValue = document.getElementById("inValue").value;
            let op = new Option(inText,inValue);

            // 获取下拉列对象
            let s1 = document.getElementById("s1");
            // 获取下拉列对象中的Option数组
            let ops = s1.options;
            // 向该数组中添加一个新的选项
            // 此时必须将数组的长度+1,且最后的元素值为创建的Option对象
            // 原有的索引号最大为s1.length-1
            // ops[s1.length-1+1] = op;
            ops[s1.length] = op;

            // s1.options[s1.length] = op简写方式
            s1[s1.length] = op;
        }
        function f3(){
            let inText = document.getElementById("inText").value;
            let inValue = document.getElementById("inValue").value;
            let op = new Option(inText,inValue);

            // 获取当前所选的项目的索引
            // 将该索引对应的元素值进行重新赋值
            let s1 = document.getElementById("s1");
            s1[s1.selectedIndex] = op;
        }
        function f4(){
            // 当数组中对应的元素值为null时,该选项会从下拉列中移除
            let s1 = document.getElementById("s1");
            s1[s1.selectedIndex] = null;
        }
        function f5(){
            // 当数组的长度发生改变,与之对应的下拉列会随之改变
            let s1 = document.getElementById("s1");
            // s1.length = 0;
            s1.length = 1;
        }
    </script>
</head>
<body>
文本值:<input type="text" id="inText"><br/>
服务器:<input type="text" id="inValue"><br/>
<button onclick="f1()">获取当前选项</button>
<button onclick="f2()">添加</button>
<button onclick="f3()">修改选中项</button>
<button onclick="f4()">删除选中项</button>
<button onclick="f5()">清空</button>
<hr/>
<!--<select id="s1" onchange="f1()">-->
<select id="s1">
    <option value="-1">请选择</option>
    <option value="1">aaa</option>
    <option value="2">bbb</option>
    <option value="3">ccc</option>
</select>

</body>
</html>